<script setup lang="ts">
import { computed, ref } from 'vue';
// 导入模块
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { startRequest, RequestPath, LoginResponseData } from '../base/RequestWork'
import { PageName } from '../base/Router';
import Account from '../base/AccountStore';
// 状态数据
const account = Account()
// 路由管理对象
const router = useRouter()
// 用户名和密码数据
let username = ref('')
let password = ref('')
// 计算属性，用来控制登录和注册按钮是否可以点击
let disabled = computed(()=>{
    return !(username.value.length > 0 && password.value.length > 0)
})
// 预留的登录方法
function login() {
    // 发起登录请求
    startRequest(RequestPath.login, 'post', {
        username: username.value,
        password: password.value
    }).then((response)=>{
        // 将返回的数据解析为LoginResponseData对象
        let data = response.data as LoginResponseData
        if (data.msg == 'ok') {
            // 如果成功，则刷新账户状态
            account.login({
                info: data.info,
                token: data.token
            })
            // 弹出消息提醒，当消息提示栏自动消失时跳转到主页
            ElMessage.success({
                message: '登录成功',
                onClose: () => {
                    router.push({
                        name: PageName.home
                    })
                }
            })
        } else {
            // 如果登录失败，则将后端返回的失败信息提示给用户
            ElMessage.error(data.error ?? '登录异常，请稍后重试')
        }
    }).catch((error)=>{
        console.log(error);
    })
}
// 预留的注册方法
function signup() {
    // 发起注册请求
    startRequest(RequestPath.signup, 'post', {
        username: username.value,
        password: password.value,
        role:'normal' // 默认用户端注册的账号角色为normal
    }).then((response)=>{
        // 注册成功，则提示用户去登录
        let data = response.data as LoginResponseData
        if (data.msg == 'ok') {
            ElMessage.success({
                message: '注册成功，请您登录'
            })
        } else {
            ElMessage.error(data.error ?? '注册异常，请稍后重试')
        }
    }).catch((error)=>{
        console.log(error);
    })
}
</script>

<template>
    <div id="background"></div>
    <div id="container">
        <div id="title">
            <h1>精选好物 任你挑选</h1>
        </div>
        <div class="input">
            <el-input v-model="username" prefix-icon="User" placeholder="请输入用户名"></el-input>
        </div>
        <div class="input">
            <el-input v-model="password" prefix-icon="Lock" placeholder="请输入密码" show-password></el-input>
        </div>
        <div class="input">
            <el-button @click="login" style="width:350px" type="primary" :disabled="disabled">登录</el-button>
            <el-button @click="signup" style="width:150px" type="default" :disabled="disabled">注册</el-button>
        </div>
    </div>
</template>

<style scoped>
/* 容器 */
#container {
    height: 100%;
    width: 100%;
    position: absolute;
}
/* 模糊的背景 */
#background {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/src/assets/background.webp");
  filter: blur(20px);
  background-size: cover;
}
/* 标题样式 */
#title {
    text-align: center;
    color: azure;
    margin-top: 200px;
}
/* 输入模块样式 */
.input {
    margin: 20px auto;
    width: 515px;
}
</style>